<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue组件</title>
</head>
<body>
  <div id="app">
    <!-- {{mes}} -->
    <input type="text" v-model="mes">
    <button @click="hadleBenClick">添加</button>
    <ul>
      <li v-for="i in list">{{i}}</li>
      <li-item :text="val"></li-item>
    </ul>
  </div>

  <script src="./js/vue.js"></script>
  <script type="text/javascript">

    /**
     * 全局注册组件
     * 
     * 在要htmlzai中使用组件时要把
     * LiTtem注册名改为
     * li-item短横线分隔命名 
     * */
   /*  Vue.component("LiItem", {
      template: "<li>这是全局注册的component {{this.text}}</li>",
      props: ["text"],
    }) */

    var item = {
      template: "<li>这是私有注册的components {{this.text}}</li>",
      props: ["text"],
    }

    var app = new Vue({
      el: "#app",
      data: {
        mes: "",
        list: [],
        val: "hello Vue"
      },
      methods:{
        hadleBenClick: function(){
          this.list.push(this.mes);
          this.mes = " ";
        }
      },
      components:{
        "li-item": item,
      }
    })
  </script>
</body>
</html>